import './index.scss'
import type { ArticeInfo } from '@/apis/article'
import { getRelativeTime } from '@/utils'
import classNames from 'classnames'

type Props = {
  articleInfo: ArticeInfo
}

function ArticleItem(props: Props) {
  const { articleInfo } = props
  return (
    <div className="article-item-container">
      {/* 单图模式添加single类 */}
      <div
        className={classNames('title-cover-wrap', {
          single: articleInfo.cover.type === 1
        })}
      >
        {/* 标题 */}
        <h3 className="title">{articleInfo.title}</h3>
        {/* 封面容器*/}
        <div className="cover">
          {articleInfo.cover.images?.map((item, index) => (
            <img src={item} key={index}></img>
          ))}
        </div>
      </div>
      {/* 底部信息 */}
      <div className="bottom-info">
        {articleInfo.is_top && <span className="istop">置顶</span>}
        <span className="author">{articleInfo.aut_name}</span>
        <span className="comment-nums">{articleInfo.comm_count}评论</span>
        <span className="time">
          {/* {articleInfo.pubdate} */}
          {/**1小时前 */}
          {getRelativeTime(articleInfo.pubdate)}
        </span>
      </div>
    </div>
  )
}

export default ArticleItem
